<template>
	<view class="page" style="background-color:#f9f9f9;overflow: hidden;">
		<view class="To" style="padding-bottom: 20rpx;">

			<!-- <view class="tab">
				<view class="tab-item" v-for="(item,index) in tabList" :key="index"
					:class="{'tab-item-select':selectIndex}">
					<text>{{item.title}}</text>
				</view>
			</view> -->
			<!-- <u-navbar :placeholder="true" bgColor="#ffffff"> -->
			<view class="u-nav-slot topsearch" slot="left">
				<!-- <u-search placeholder="搜索你想要的文案" v-model="keyword" bg-color="#ffffff" height="70rpx" :animation="false"
          :showAction="false" :clearabled="false" @click="goSearch" /> -->
				<view class="search" @click="goSearch">
					<view class="search_txt"><img src="/static/home/se.png">请输入你想要的文案</view>
				</view>
			</view>
			<!-- </u-navbar> -->
		</view>
		<view v-if="!isSearching" style="margin-top: 100rpx;">
			<view class="content" v-if="selectIndex === 0">
				<view class="content_t">
					<view class="content_t_left">日常文案</view>
					<view class="content_t_right" @click="toFull">查看全部<img class="arr" src="/static/fish/right.png"
							alt=""></view>
				</view>
				<view class="content_b">
					<view class="content_b_con">
						<view class="content_b_con_item" v-for="(item, index) in viewList" :key="index"
							:style="{ backgroundColor: getRandomBackgroundColor()}">
							<text>{{ item.title }}</text>
						</view>
					</view>
				</view>
				<view class="content_t">
					<view class="content_t_left">广告文案</view>
					<view class="content_t_right">查看全部<img class="arr" src="/static/fish/right.png" alt=""></view>
				</view>
				<view class="content_b">
					<view class="content_b_con">
						<view class="content_b_con_item" v-for="(item, index) in adList" :key="index"
							:style="{ backgroundColor: getRandomBackgroundColor()}">
							<text>{{ item.title }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<!-- <view class="content" v-if="selectIndex === 0">
        <view class="content_t">
          <view class="content_t_left">日常文案</view>
          <view class="content_t_right">查看全部<img class="arr" src="/static/fish/right.png" alt=""></view>
        </view>
        <view class="content_b">
          <view class="content_b_con">
            <view class="content_b_con_item" v-for="(item, index) in filteredList1" :key="index"
              :style="{ backgroundColor: getRandomBackgroundColor()}">
              <text>{{ item.title }}</text>
            </view>
          </view>
        </view>
        <view class="content_t">
          <view class="content_t_left">广告文案</view>
          <view class="content_t_right">查看全部<img class="arr" src="/static/fish/right.png" alt=""></view>
        </view>
        <view class="content_b">
          <view class="content_b_con">
            <view class="content_b_con_item" v-for="(item, index) in filteredList2" :key="index"
              :style="{ backgroundColor: getRandomBackgroundColor()}">
              <text>{{ item.title }}</text>
            </view>
          </view>
        </view>
      </view> -->
			<view class="content" v-if="selectIndex === 1" style="margin-top: 100rpx;">
				<scroll-view :scroll-x="true" class="scroll-X" :scroll-into-view="scrollTabId" :show-scrollbar='false'
					:scroll-with-animation="true">
					<view class="tab-item" v-for="(item,index) in typeList" :key="index"
						:class="{'tab-item-select':index==scrollIndex}" :id="'tabIds'+index"
						@click="changeTabs(item,index)">
						<text>{{item.movieType}}</text>
					</view>
				</scroll-view>
				<scroll-view :scroll-x="true" class="scroll-X" :scroll-into-view="scrollTabId" :show-scrollbar='false'
					:scroll-with-animation="true">
					<view class="tab-item" v-for="(item,index) in languageList" :key="index"
						:class="{'tab-item-select':index==scrollIndexs}" :id="'tabIdss'+index"
						@click="changeTabss(item,index)">
						<text>{{item.area}}</text>
					</view>
				</scroll-view>
				<scroll-view :scroll-x="true" class="scroll-X" :scroll-into-view="scrollTabId" :show-scrollbar='false'
					:scroll-with-animation="true">
					<view class="tab-item" v-for="(item,index) in yearList" :key="index"
						:class="{'tab-item-select':index==scrollIndexss}" :id="'tabIdsss'+index"
						@click="changeTabS(item,index)">
						<text>{{item.year}}</text>
					</view>
				</scroll-view>
				<view class="cont">
					<view class="cont_c" v-for="(items,index) in filteredList3" :key="index"
						@click="toRewrite(items,index)">
						<view class="cont_c_title">
							{{items.title}}
						</view>
						<view class="cont_c_type" style="margin:16rpx 0 0 28rpx">{{items.movieType}}</view>
						<view class="cont_c_dir" style="margin:16rpx 0 0 28rpx">{{items.director}}</view>
						<view class="cont_c_dir" style="margin:16rpx 0 0 28rpx">{{items.area}}</view>
						<view class="cont_c_dir" style="margin:20rpx 0 0 20rpx;font-size:26rpx">上映时间：{{items.year}}
						</view>
						<view class="lin"></view>
						<view class="beg">
							<img style="width:23rpx;height:23rpx;margin-right:12rpx" src="/static/fish/cz.png" alt="">
							开始创作
						</view>
					</view>
				</view>
			</view>
			<!-- tab数据没有分类的展示 -->
			<!-- <view class="" v-if="tabshow">
				暂无数据
			</view> -->
			<view>
				<view class="wrap"><u-loadmore :status="status" /></view>
			</view>
		</view>
		<view v-if="!isSearching" style="margin-top: 100rpx;">
			<view class="content" v-if="selectIndex === 1">
				<scroll-view :scroll-x="true" class="scroll-X" :scroll-into-view="scrollTabId" :show-scrollbar='false'
					:scroll-with-animation="true">
					<view class="tab-item" v-for="(item,index) in typeList" :key="index"
						:class="{'tab-item-select':index==scrollIndex}" :id="'tabIds'+index"
						@click="changeTabs(item,index)">
						<text>{{item.movieType}}</text>
					</view>
				</scroll-view>
				<scroll-view :scroll-x="true" class="scroll-X" :scroll-into-view="scrollTabId" :show-scrollbar='false'
					:scroll-with-animation="true">
					<view class="tab-item" v-for="(item,index) in languageList" :key="index"
						:class="{'tab-item-select':index==scrollIndexs}" :id="'tabIdss'+index"
						@click="changeTabss(item,index)">
						<text>{{item.area}}</text>
					</view>
				</scroll-view>
				<scroll-view :scroll-x="true" class="scroll-X" :scroll-into-view="scrollTabId" :show-scrollbar='false'
					:scroll-with-animation="true">
					<view class="tab-item" v-for="(item,index) in yearList" :key="index"
						:class="{'tab-item-select':index==scrollIndexss}" :id="'tabIdsss'+index"
						@click="changeTabS(item,index)">
						<text>{{item.year}}</text>
					</view>
				</scroll-view>
				<view class="cont">
					<view class="cont_c" v-for="(item,index) in entryList" :key="index" @click="toRewrite(item,index)">
						<view class="cont_c_title">
							{{item.title}}
						</view>
						<view class="cont_c_type" style="margin:16rpx 0 0 28rpx">{{item.movieType}}</view>
						<view class="cont_c_dir" style="margin:16rpx 0 0 28rpx">{{item.director}}</view>
						<view class="cont_c_dir" style="margin:16rpx 0 0 28rpx">{{item.area}}</view>
						<view class="cont_c_dir" style="margin:20rpx 0 0 20rpx;font-size:26rpx">上映时间：{{item.year}}
						</view>
						<view class="lin"></view>
						<view class="beg">
							<img style="width:23rpx;height:23rpx;margin-right:12rpx" src="/static/fish/cz.png" alt="">
							开始创作
						</view>
					</view>
				</view>
				<view class="wrap">
					<u-loadmore :status="status" />
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		wycUrl,
		apiMixUrlApi
	} from "../../api/assemb";
	export default {
		data() {
			return {
				tabshow: false, //没有数据展示
				tab: true, //下拉刷新显示
				scrollTabId: 'tabId0',
				scrollIndex: 0,
				scrollIndexs: 0,
				scrollIndexss: 0,
				typeList: [{
					movieType: '全部',
				}, ],
				languageList: [{
						area: '全部',
					},
					{
						area: '华语',
					},
					{
						area: '欧美',
					},
					{
						area: '韩国',
					},
					{
						area: '日版',
					},
					{
						area: '中国大陆',
					},
					{
						area: '美国',
					},
					{
						area: '意大利',
					},
					{
						area: '俄罗斯',
					},
					{
						area: '波兰',
					},
				],
				yearList: [{
						year: '全部',
					},
					{
						year: '2023',
					},
					{
						year: '2022',
					},
					{
						year: '2021',
					},
					{
						year: '2020',
					},
					{
						year: '2019',
					},
					{
						year: '2018',
					},
					{
						year: '2017',
					},
					{
						year: '2016',
					},
					{
						year: '2015',
					},
					{
						year: '2014',
					},
				],
				selectIndex: 1,
				tabList: [
					// {
					//   title: '通用文案',
					//   type: 0,
					//   list: []
					// },
					{
						title: '文案解说',
						type: 1,
						list: []
					},
				],
				viewList: [{
						title: '早安'
					},
					{
						title: '早安'
					},
					{
						title: '早安'
					},
					{
						title: '午安'
					},
					{
						title: '早安'
					},
					{
						title: '早安'
					},
					{
						title: '早安'
					},
					{
						title: '早安'
					},
					{
						title: '早安'
					},
					{
						title: '早安'
					},
					{
						title: '早安'
					},
					{
						title: '早安'
					},
					{
						title: '早安'
					},
					{
						title: '早安'
					},
					{
						title: '早安'
					},
					{
						title: '早安'
					},
					{
						title: '早安'
					},
					{
						title: '早安'
					},
				],
				adList: [{
						title: '化妆品'
					},
					{
						title: '日用品'
					},
					{
						title: '奶茶店'
					},
					{
						title: '化妆品'
					},
					{
						title: '化妆品'
					},
					{
						title: '化妆品'
					},
					{
						title: '化妆品'
					},
					{
						title: '化妆品'
					},
					{
						title: '化妆品'
					},
					{
						title: '化妆品'
					},
					{
						title: '化妆品'
					},
					{
						title: '化妆品'
					},
					{
						title: '化妆品'
					},
					{
						title: '化妆品'
					},
					{
						title: '化妆品'
					},
					{
						title: '化妆品'
					},
					{
						title: '化妆品'
					},
					{
						title: '化妆品'
					},
					{
						title: '化妆品'
					},
					{
						title: '化妆品'
					},
					{
						title: '化妆品'
					},
					{
						title: '化妆品'
					},
					{
						title: '化妆品'
					},
					{
						title: '化妆品'
					},
					{
						title: '化妆品'
					},
					{
						title: '化妆品'
					},
					{
						title: '化妆品'
					},
					{
						title: '化妆品'
					},
					{
						title: '化妆品'
					},
					{
						title: '化妆品'
					},
				],
				entryList: [],
				aList: [],
				bList: [],
				cList: [],
				filteredList3: [],
				keyword: '',
				isSearching: false,
				status: 'loadmore',
				lists: 15,
				page: 1,
				type: '',
				area: '',
				year: '',
				titletop: '',
				titleheight: ''

			}
		},
		computed: {
			filteredList() {
				if (this.aList.length === 0) {
					return []
				} else {
					const reg = new RegExp(this.searchValue, 'i')
					return this.aList.filter(item => {
						return item.title.match(reg) || item.content.match(reg)
					})
				}
			}
		},
		//触底事件
		onReachBottom() {
			// if (this.page >= 20) return;
			this.status = 'loading';
			this.page = ++this.page;

			// 考虑数据标记搜索状态
			if (this.isSearching == true) {
				setTimeout(() => {
					this.seadown()
				}, 1500)

			} else {
				setTimeout(() => {
					// this.lists += 15;
					// if (this.page >= 20) this.status = 'nomore';
					// else this.status = 'loading';
					this.getMovieSample(this.page)
					console.log('正常情况的下拉')
				}, 1500)
			}
		},
		onLoad() {
			this.getMovie()
			this.getMovieSample()
			this.getHeight()
		},
		onShow() {
			console.log(uni.getStorageSync('ban'), '======================')
			if (uni.getStorageSync('ban')) {
				this.statementShows = true;
			} else {
				this.statementShows = false;
			}
			// 获取次数
			this.getFrequency();
		},
		// onUnload() {
		//     //#ifdef MP-WEIXIN
		// 	uni.switchTab({
		// 		url:'pages/home/home'
		// 	})
		//     //#endif
		//   },
		methods: {

			getHeight() {
				let res = uni.getMenuButtonBoundingClientRect();
				this.titletop = res.top * 1.37;
				this.titleheight = res.height
				console.log(res);
				console.log("titletop的值", this.titletop);
				console.log("titleheight的值", this.titleheight);
				console.log("一半的titleheight的值", this.titleheight / 2);
			},
			//下拉搜索的接口，page参数表现不同
			seadown() {
				let param = {
					page: this.page,
					type: this.type,
					area: this.area,
					year: this.year
				}
				apiMixUrlApi(param, 1131, 'GetMovieTextSample').then((res) => {

					console.log(res, '没有状态')
					if (res.imgmovietexts == null) {
						this.status = 'nomore'
						console.log('没有内容')
						return
					} else {
						this.filteredList3 = [...this.filteredList3, ...res.imgmovietexts]
					}

				})
			},
			goSearch() {
				console.log('123123');
				uni.navigateTo({
					url: '/pages/aitool/search'
				})
			},
			getMovie() {
				apiMixUrlApi({}, 1130, 'GetMovieTextType').then((res) => {
					console.log("🚀 ~ file: tooles.vue:566 ~ wycUrl ~ res:", res)
					this.typeList = [...this.typeList, ...res.types]
				})
			},

			//获取参数的接口,拿到列表数据
			getMovieSample() {
				let param = {
					page: this.page
				}

				apiMixUrlApi(param, 1131, 'GetMovieTextSample').then((res) => {
					console.log("🚀 ~ file: tooles.vue:514 ~ apiMixUrlApi ~ res:", res)
					if (res.imgmovietexts == null) {
						this.status = 'nomore'
						console.log('没有内容')
						return
					} else {
						this.entryList = [...this.entryList, ...res.imgmovietexts]
					}

				})
			},
			getRandomBackgroundColor() {
				const colors = ['#fff9f9', '#fbf9ff', '#fffcf9', '#f9f9ff', '#f9fffc', '#fff9fd'];
				const randomColor = colors[Math.floor(Math.random() * colors.length)];
				return randomColor;
			},
			// 获取次数
			getFrequency() {
				apiMixUrlApi({}, 1042, 'GetPaymentInfo').then(data => {
					if (data.descinfo == "success") {
						uni.setStorageSync('frequency', data.coins)
					}
				});
			},
			toFull() {
				uni.navigateTo({
					url: '/pages/aitool/full'
				})
			},
			toRewrite(item) {
				let param = {
					key: item
				};
			   console.log('跳转了')
				let result = JSON.stringify(param).replace(/\?/g, "");
				console.log(result)
				uni.navigateTo({
					url: '/pages/aitool/rewrite?param=' + result
				})
			},
			changeTab(item, index) {
				this.isSearching = false // 标记当前是否处于搜索状态
				this.selectIndex = index
				let number = (index - 1) < 0 ? 0 : (index - 1)
				this.scrollTabId = 'tabId' + number
			},
			//切换tab栏分类搜索
			search() {
				this.page = 1
				let param = {
					page: this.page,
					type: this.type,
					area: this.area,
					year: this.year
				}
				apiMixUrlApi(param, 1131, 'GetMovieTextSample').then((res) => {
					console.log("🚀 ~ file: tooles.vue:514 ~ apiMixUrlApi ~ res:", res)
					this.filteredList3 = res.imgmovietexts
					if (res.imgmovietexts == null) {
						this.status = 'nomore'
						return
					}
					// this.filteredList3 = res.imgmovietexts
					// this.filteredList3 = [...this.filteredList3, ...res.imgmovietexts]
				})
			},

			changeTabs(item, index) {
				// console.log(item.type,'0000000000000000000000000')
				if (item.movieType == '全部') {
					console.log('0000q1111')
					this.type = ''
					this.search()
				} else {
					this.type = item.movieType
					this.search()
				}
				//赋值对应分类
				console.log(item, '0000000')
				// this.type = item.movieType
				this.isSearching = true
				this.scrollIndex = index
				let number = (index - 1) < 0 ? 0 : (index - 1)
				this.scrollTabId = 'tabIds' + number
				// this.search()
			},
			changeTabss(item, index) {
				if (item.area == '全部') {
					console.log('0000')
					this.area = ''
					this.search()
				} else {
					this.area = item.area
					console.log('第二类')
					this.search()
				}
				//赋值对应分类

				console.log(item.area, '第二类')
				this.isSearching = true
				this.scrollIndexs = index
				let number = (index - 1) < 0 ? 0 : (index - 1)
				this.scrollTabId = 'tabIdss' + number

			},
			changeTabS(item, index) {
				if (item.year == '全部') {
					console.log('0000')
					this.year = ''
					this.search()
				} else {
					this.year = item.year
					this.search()
				}
				//赋值对应分类
				// this.year = item.year
				console.log(item.year, '第三类')
				this.isSearching = true
				this.scrollIndexss = index
				let number = (index - 1) < 0 ? 0 : (index - 1)
				this.scrollTabId = 'tabIdsss' + number
				// this.search()
			},
			//切换swiper
			changeSwiper(e) {
				this.selectIndex = e.detail.current
				let number = (e.detail.current - 1) < 0 ? 0 : (e.detail.current - 1)
				this.scrollTabId = 'tabId' + number
			},
			//跳转页面
			goPage(item) {
				console.log('item', item)
				console.log('item.url', item.url)
				// const id = 3
				if (item.url) {
					console.log('item.url', item.url)
					if (item.tab == 0) {
						console.log('00')
						uni.navigateTo({
							url: item.url
						});
					}
					uni.navigateTo({
						url: '/pages/webview/webview?url=' + item.url
					});
				} else {
					uni.showToast({
						title: '暂未开放',
						icon: 'none',
						duration: 2000
					});
				}
			},


			//tab栏操作
			movieTypeSearchClicks(value) {
				if (value.movieType == '全部') {
					this.isSearching = false;
				} else {
					this.isSearching = true // 标记当前处于搜索状态
					this.cList = []
					this.filteredList3 = []
					// 然后开始循环全部数据
					for (var i = 0; i < this.entryList.length; i++) {
						const item = this.entryList[i]
						if (item.movieType.indexOf(value.movieType) !== -1) {
							this.cList.push(item)
						}
					}
					this.filteredList3 = [...this.cList]
				}
			},
			languageSearchClicks(value) {
				if (value.area == '全部') {
					this.isSearching = false;
				} else {
					this.isSearching = true // 标记当前处于搜索状态
					this.cList = []
					this.filteredList3 = []
					// 然后开始循环全部数据
					for (var i = 0; i < this.entryList.length; i++) {
						const item = this.entryList[i]
						if (item.area.indexOf(value.area) !== -1) {
							this.cList.push(item)
						}
					}
					this.filteredList3 = [...this.cList]
				}
			},
			YearSearchClicks(value) {
				if (value.year == '全部') {
					this.isSearching = false;
				} else {
					this.isSearching = true // 标记当前处于搜索状态
					this.cList = []
					this.filteredList3 = []
					// 然后开始循环全部数据
					for (var i = 0; i < this.entryList.length; i++) {
						const item = this.entryList[i]
						if (item.year.indexOf(value.year) !== -1) {
							this.cList.push(item)
						}
					}
					this.filteredList3 = [...this.cList]
				}
			},



			searchClick(value) {
				if (!value) { // 简化了值为空字符串和值为 null 和 undefined 的情况
					console.log('123')
					this.isSearching = false // 标记当前是否处于搜索状态
					// 如果输入的值为空则加载所有的列表
					// this.getList();
				} else {
					// 先清空展示的数据
					this.aList = []
					this.bList = []
					this.cList = []
					this.filteredList3 = []
					this.filteredList2 = []
					this.filteredList1 = []
					// 然后开始循环全部数据
					for (var i = 0; i < this.viewList.length; i++) {
						const item = this.viewList[i] // 将当前子项存储至一个变量中，避免频繁访问 this.contextList[i]
						// 判断数据里面是否有符合输入的内容
						//（核心所在，其它都是根据需求来自己写）
						if (item.title && item.title.indexOf(value) >= 0) { // 先判断该属性值是否存在再进行搜索
							this.aList.push(item)
						}
					}
					for (var i = 0; i < this.adList.length; i++) {
						const item = this.adList[i]
						if (item.title && item.title.indexOf(value) >= 0) {
							this.bList.push(item)
						}
					}
					for (var i = 0; i < this.entryList.length; i++) {
						const item = this.entryList[i]
						if (item.title && item.title.indexOf(value) >= 0) {
							this.cList.push(item)
						}
					}

					this.isSearching = true // 标记当前处于搜索状态
					this.filteredList1 = [...this.aList]
					this.filteredList2 = [...this.bList]
					this.filteredList3 = [...this.cList]
				}
				// 因为 aList 变量改变了，所以此处需要手动触发一次  的更新
				this.$forceUpdate() // 强制当前实例重新渲染，包括组件和子组件
			},
			autoSearch: function() {
				this.searchClick(this.keyword)
			},

		}
	}
</script>
<style lang="less">
	.page {
		width: 100%;
		//   height: 100vh;
		//   background-color: #f7f7f7;
	}

	.tab {
		width: 100%;
		height: 100rpx;
		background: linear-gradient(180deg, #ffeeee 0%, #f8f8f8 100%);
		//   position: fixed;
		//   top: 80rpx;
		//   left: 20%;
		z-index: 99;
	}

	.tab-item {
		height: 100%;
		padding: 0rpx 40rpx;
		color: #8b8b8b;
		display: inline-block;
		line-height: 100rpx;
		position: relative;
		font-size: 30rpx;
	}

	.tab-item-select {
		font-size: 36rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #f1445d;
	}

	.search {
		width: 690rpx;
		height: 70rpx;
		background: #fffefe;
		border-radius: 36rpx;
		opacity: 0.76;
		border: 1rpx solid #c9c9c9;
	}

	.search_txt {
		width: 234rpx;
		height: 36rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #cccccc;
		line-height: 36rpx;
		margin-top: 20rpx;
		margin-left: 75rpx;

		image {
			width: 29rpx;
			height: 29rpx;
			position: absolute;
			left: 65rpx;
		}
	}

	/deep/::-webkit-scrollbar {
		display: none;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
		color: transparent;
	}

	.topsearch {
		//   margin-top: 304rpx;
		width: 696rpx;
	}

	// ===================
	.tabs {
		margin-top: 300rpx;
		display: flex;
		justify-content: space-evenly;
	}

	.tabs_left {
		width: 144rpx;
		height: 50rpx;
		font-size: 36rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #f1445d;
	}

	.tabs_right {
		width: 112rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #6d6d6d;
	}

	.content {
		margin: 40rpx 30rpx 30rpx;
	}

	.content_t {
		display: flex;
		justify-content: space-between;
	}

	.content_t_left {
		width: 144rpx;
		height: 50rpx;
		font-size: 36rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #332f2f;
	}

	.content_t_right {
		margin-top: 10rpx;
		height: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 400;
		color: #6d6d6d;
	}

	.arr {
		width: 13rpx;
		height: 22rpx;
		margin-left: 10rpx;
	}

	.content_b {}

	.content_b_con {
		display: flex;
		flex-wrap: wrap;
	}

	.content_b_con_item {
		display: flex;
		margin: 10px;
		height: 78rpx;
		line-height: 78rpx;
		border-right: 20rpx;
		align-items: center;
		justify-content: center;
		flex: 0 0 calc(22% - 10px);
		/* 控制每行显示4个元素 */
		background-color: #fbf9ff;
	}

	.scroll-X {
		width: 100%;
		height: 100%;
		white-space: nowrap;

		.tab-item {
			height: 100%;
			padding: 0rpx 40rpx;
			color: #8b8b8b;
			display: inline-block;
			line-height: 60rpx;
			position: relative;
			font-size: 30rpx;
			margin-bottom: 16rpx;
		}

		.tab-item-select {
			height: 60rpx;
			color: red;
			background: #ffffff;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			border: 2rpx solid #f1445d;
		}
	}

	.cont {
		display: flex;
		flex-wrap: wrap;
	}

	.cont_c {
		width: 325rpx;
		height: 370rpx;
		background: linear-gradient(180deg, #ffffff 0%, #fff6f8 100%);
		box-shadow: 0rpx 6rpx 12rpx 2rpx #e8e8e8;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-bottom: 20rpx;
	}

	.cont_c:nth-child(odd) {
		margin-right: 40rpx;
		//   color: red;
	}

	.beg {
		height: 42rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #f1445d;
		padding-left: 25%;
	}

	.types {
		text {
			width: 80rpx;
			height: 36rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			opacity: 1;
			border: 1rpx solid #aeaeae;
			margin: 0 20rpx 0 0;
			padding: 5rpx 8rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #a7a7a7;
		}
	}

	.lin {
		width: 98%;
		height: 1rpx;
		opacity: 1;
		border: 2rpx solid #fffefe;
		margin: 18rpx 0 8rpx 0;
	}

	.wrap {
		padding: 24rpx;
	}

	.item {
		padding: 24rpx 0;
		font-size: 28rpx;
	}

	.cont_c_title {
		margin: 26rpx;
		height: 50rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #332f2f;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.cont_c_type {
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #a7a7a7;
	}

	.cont_c_dir {
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #919191;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 90%;
	}

	.To {
		display: flex;
		// padding-top: 60rpx;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		background: #f8f8f8;
		// background: linear-gradient(180deg, #ffeeee 0%, #f8f8f8 100%);
		position: fixed;
		width: 100%;
		z-index: 99;
	}
</style>